---
description: Компонент для создания градиентных подложек.
---

<Overview group="utils">

# Gradient [tag:component]

Компонент для создания градиентных подложек. Используется для визуального разделения контента,
создания плавных переходов между элементами или акцента на определённых областях интерфейса.

</Overview>

<Playground>
  ```jsx
  <Gradient
    mode="overlay"
    to="top"
    style={{ position: 'absolute', top: 0, bottom: 0, left: 0, right: 0 }}
  />
  <Placeholder
    icon={<Avatar size={56} />}
    title="Алексей Мазелюк"
    action={<Button size="m">Редактировать</Button>}
  >
    Учащийся
  </Placeholder>
  ```
</Playground>

## Доступность (a11y) [#a11y]

Компонент имеет `role="presentation"`, что означает:

- не требует ARIA-атрибутов;
- не должен содержать важный контент;
- не влияет на семантику документа.

```jsx
// ❌ Плохо (градиент содержит текст)
<Gradient>
 <Text>Важная информация</Text>
</Gradient>

// ✅ Хорошо (текст вынесен отдельно)
<div style={{ position: 'relative' }}>
 <Gradient />
 <Text>Важная информация</Text>
</div>
```

## Свойства и методы [#api]

<PropsTable name="Gradient" />
